<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排班管理 - 迈浪心理</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/schedule.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="layout">
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <div class="logo">
                    <h1>迈浪心理</h1>
                </div>
                <nav class="nav-menu">
                    <a href="index.html" class="nav-item">
                        <span class="nav-icon">📊</span>
                        <span>工作台</span>
                    </a>
                    <a href="schedule.html" class="nav-item active">
                        <span class="nav-icon">📅</span>
                        <span>排班管理</span>
                    </a>
                    <a href="records.html" class="nav-item">
                        <span class="nav-icon">📝</span>
                        <span>咨询记录</span>
                    </a>
                    <div class="nav-divider"></div>
                    <a href="profile.html" class="nav-item">
                        <span class="nav-icon">⚙️</span>
                        <span>个人设置</span>
                    </a>
                </nav>
            </aside>

            <!-- 主内容区 -->
            <main class="main-content">
                <!-- 排班日历 -->
                <div class="schedule-calendar">
                    <div class="calendar-header">
                        <div class="calendar-nav">
                            <button class="nav-btn prev-btn" @click="previousWeek" :disabled="isPastWeek">
                                <span class="nav-icon">←</span>
                            </button>
                            <div class="date-picker">
                                <button class="today-btn" @click="goToToday">今天</button>
                                <span class="current-week">{{ currentWeekRange }}</span>
                            </div>
                            <button class="nav-btn next-btn" @click="nextWeek">
                                <span class="nav-icon">→</span>
                            </button>
                        </div>
                        <button class="add-btn" @click="showAddScheduleModal">添加排班</button>
                    </div>

                    <table class="schedule-table">
                        <thead>
                            <tr>
                                <th class="time-header">时间</th>
                                <th v-for="day in weekDays" :key="day.fullDate">
                                    {{ day.name }}<br>
                                    <span class="date">{{ formatDisplayDate(day.date) }}</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(timeSlot, timeIndex) in timeSlots" :key="timeSlot">
                                <td class="time-cell">{{ timeSlot }}</td>
                                <td v-for="(day, dayIndex) in calendarData" :key="day.date"
                                    :class="getSlotClass(day.slots[timeIndex])" @click="handleSlotClick(day, timeSlot)">
                                    <template v-if="day.slots[timeIndex]">
                                        <div class="slot-content">
                                            <div class="slot-type">
                                                {{ day.slots[timeIndex].type === 'online' ? '在线咨询' : '面对面咨询' }}
                                            </div>
                                            <div class="slot-status">
                                                {{ getStatusText(day.slots[timeIndex].status) }}
                                            </div>
                                            <div v-if="day.slots[timeIndex].client" class="slot-client">
                                                预约人：{{ day.slots[timeIndex].client.name }}
                                            </div>
                                        </div>
                                    </template>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 添加排班模态框 -->
                <div class="modal" v-if="showModal">
                    <div class="modal-content">
                        <h3>添加排班</h3>
                        <form @submit.prevent="submitSchedule">
                            <div class="form-group">
                                <label>日期</label>
                                <input type="date" v-model="scheduleForm.date" required>
                            </div>
                            <div class="form-group">
                                <label>时间段</label>
                                <select v-model="scheduleForm.timeSlot" required>
                                    <option value="">请选择时间段</option>
                                    <option v-for="slot in timeSlots" :key="slot" :value="slot">
                                        {{ slot }}
                                    </option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>咨询类型</label>
                                <input type="text" value="面对面咨询" readonly disabled>
                            </div>
                            <div class="form-buttons">
                                <button type="button" class="cancel-btn" @click="closeModal">取消</button>
                                <button type="submit" class="submit-btn">确认添加</button>
                            </div>
                        </form>
                    </div>
                </div>
            </main>
        </div>
    </div>
    <script src="js/schedule.js"></script>
</body>

</html>